<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">

<head>
	<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
	<meta name="description" content=""/>
	<meta name="keywords" content="" />
	<meta name="author" content="" />
	<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
	<title>Website Template: Simple Organization - Style Demo (demo)</title>
</head>

<body>

<div id="site-wrapper">

	<div id="header">

		<div id="top">

			<div class="left" id="logo">
				<a href="index.html"><img src="img/logo.gif" alt="" /></a>
			</div>

			<div class="left navigation" id="main-nav">

				<ul class="tabbed">
					<li class="current-tab"><a href="index.html">Blog</a></li>
					<li><a href="#">Events</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Archives</a></li>
					<li><a href="#">Join Us!</a></li>
				</ul>

				<div class="clearer">&nbsp;</div>

			</div>

			<div class="clearer">&nbsp;</div>

		</div>

		<div class="navigation" id="sub-nav">

			<ul class="tabbed">
				<li><a href="index.html">Template Info</a></li>
				<li class="current-tab"><a href="style-demo.html">Style Demo</a></li>
				<li><a href="comments.html">Comments</a></li>
				<li><a href="archives.html">Archives</a></li>
				<li><a href="no-subnavigation.html">No Subnavigation</a></li>
				<li><a href="left-sidebar.html">Left Sidebar</a></li>
				<li><a href="single-column.html">Single Column</a></li>
				<li><a href="empty-page.html">Empty Page</a></li>
			</ul>

			<div class="clearer">&nbsp;</div>

		</div>

	</div>

	<div class="main" id="main-two-columns">

		<div class="left" id="main-content">

			<h1>Heading 1</h1>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

			<h2>Heading 2</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

			<h3>Heading 3</h3>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

			<h4>Heading 4</h4>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

			<h5>Heading 5</h5>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

			<h6>Heading 6</h6>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

			<div class="content-separator"></div>

			<h2>Images in text</h2>

			<p>Curabitur faucibus risus quis lectus. <a href="#">Donec vehicula</a>. Pellentesque nec, lectus. Nullam dictum sem. Phasellus varius. Vestibulum in felis in mauris consequat molestie</p>

			<img src="img/sample-thumbnail.jpg" width="75" height="75" alt="" class="alignleft" />

			<p>Consectetur adipiscing elit. In nisi. Duis condimentum est nec augue blandit scelerisque. Phasellus varius. Vestibulum in felis in mauris consequat molestie. Sem nec pellentesque condimentum, turpis massa ultricies nisi, at molestie justo eros ac velit.</p>

			<img src="img/sample-thumbnail.jpg" width="75" height="75" alt="" class="alignright" />

			<p>Curabitur euismod mi ac neque. Cras vel tortor molestie <a href="#">tortor luctus</a> facilisis. Nulla a nunc. Vivamus est. Integer ac sem quis ipsum dignissim sodales. Nam pulvinar sem eu nibh. Suspendisse non nulla et ligula bibendum facilisis. Suspendisse potenti. Vivamus leo.</p>

			<p>Nulla lacus tortor, ornare vitae, vulputate vitae, sed quis magna. Pellentesque urna urna, bibendum non, ornare in, sollicitudin quis, est.</p>

			<div class="clearer">&nbsp;</div>

			<div class="content-separator"></div>

			<h2>Form Elements</h2>

			<form method="post" action="">
			<div>
				
				<p>
					<label for="input-1">Textbox</label><br/>
					<input type="text" name="input-1" id="input-1" class="text" />
				</p>

				<p>
					<label for="input-2">Droplist</label><br/>
					<select name="input-2" id="input-2">
						<option>Option 1</option>
						<option>Option 2</option>
						<option>Option 3</option>
					</select>
				</p>

				<p>
					<label for="input-3">Textarea</label><br/>
					<textarea name="input-3" id="input-3" rows="10" cols="90"></textarea>
				</p>

				<p>
					<label>Radio Buttons</label><br/>
					<input type="radio" name="input-4" id="input-4" /> <label for="input-4" class="radio">Option 1</label> <input type="radio" name="input-4" id="input-5" /> <label for="input-5" class="radio">Option 2</label> <input type="radio" name="input-4" id="input-6" /> <label for="input-6" class="radio">Option 3</label>
				</p>

				<p>
					<label>Checkbox</label><br/>
					<input type="checkbox" name="input-7" id="input-7" /> <label for="input-7" class="checkbox">Option</label>
				</p>

			</div>			
			</form>

			<div class="content-separator"></div>

			<h2>Messages</h2>

			<div class="success">Success!</div>

			<div class="notice">Notice</div>

			<div class="error">Error..</div>

			<div class="content-separator"></div>

			<h2>Blockquote</h2>

			<blockquote>
				<p>Praesent orci nisi, interdum quis, tristique vitae, consectetur sed, arcu. Ut at sapien non dolor semper sollicitudin. Etiam semper erat quis odio. Quisque commodo suscipit velit. Nulla facilisi.</p>
				<p><cite>- Duis justo quam</cite></p>
			</blockquote>

			<div class="content-separator"></div>

			<h2>Lists</h2>

			<h3>Unsorted list</h3>
			<ul>
				<li>Blandit in, interdum a</li>
				<li>Ultrices non lectus</li>
				<li>Nunc id odio</li>
				<li>Fusce ultricies</li>
			</ul>

			<h3>Ordered list</h3>
			<ol>
				<li>Blandit in, interdum a</li>
				<li>Ultrices non lectus</li>
				<li>Nunc id odio</li>
				<li>Fusce ultricies</li>
			</ol>

			<h3>Definition list</h3>

			<dl>
				<dt>title</dt>
				<dd>definition</dd>
				<dd>definition</dd>
				<dt>title</dt>
				<dt>title</dt>
				<dd>definition</dd>
				<dt>title</dt>
				<dd>definition</dd>
			</dl>

			<div class="content-separator"></div>

			<h2>Tables</h2>

			<h3>Data table</h3>

			<table class="data-table">
				<tr>
					<th>Property 1</th>
					<th>Property 2</th>
					<th>Property 3</th>
					<th>Property 4</th>
				</tr>
				<tr class="even">
					<td>Value 1.1</td>
					<td>Value 1.2</td>
					<td>Value 1.3</td>
					<td>Value 1.4</td>
				</tr>
				<tr>
					<td>Value 2.1</td>
					<td>Value 2.2</td>
					<td>Value 2.3</td>
					<td>Value 2.4</td>
				</tr>
				<tr class="even">
					<td>Value 3.1</td>
					<td>Value 3.2</td>
					<td>Value 3.3</td>
					<td>Value 3.4</td>
				</tr>
				<tr>
					<td>Value 4.1</td>
					<td>Value 4.2</td>
					<td>Value 4.3</td>
					<td>Value 4.4</td>
				</tr>
			</table>			
			
		</div>

		<div class="right sidebar" id="sidebar">

			<div class="section">

				<div class="section-title">Search</div>

				<div class="section-content">
					<form method="post" action="">
						<input type="text" class="text" size="28" /> &nbsp; <input type="submit" class="button" value="Submit" />
					</form>
				</div>

			</div>

			<div class="section">

				<div class="section-title">Recent Entries</div>

				<div class="section-content">

					<ul class="nice-list">
						<li>
							<div class="left"><a href="#">Aenean tempor arcu..</a></div>
							<div class="right">Oct 12</div>
							<div class="clearer">&nbsp;</div>
						</li>
						<li>
							<div class="left"><a href="#">Justo interdum rutrum</a></div>
							<div class="right">Sep 15</div>
							<div class="clearer">&nbsp;</div>
						</li>
						<li>
							<div class="left"><a href="#">In nec justo in urna</a></div>
							<div class="right">Sep 12</div>
							<div class="clearer">&nbsp;</div>
						</li>
						<li>
							<div class="left"><a href="#">Accumsan condimentum</a></div>
							<div class="right">Sep 6</div>
							<div class="clearer">&nbsp;</div>
						</li>
						<li>
							<div class="left"><a href="#">Etiam commodo bibendum</a></div>
							<div class="right">Aug 27</div>
							<div class="clearer">&nbsp;</div>
						</li>
						<li>
							<div class="left"><a href="#">Mauris euismod justo</a></div>
							<div class="right">Aug 21</div>
							<div class="clearer">&nbsp;</div>
						</li>
						<li><a href="#" class="more">Browse Archives &#187;</a></li>
					</ul>

				</div>

			</div>

			<div class="section">

				<div class="section-title">Board of Members</div>

				<div class="section-content">

					<ul class="nice-list">
						<li><a href="#">Elem Semper</a> <span class="quiet">- Director</span></li>
						<li><a href="#">Porttitor Urna</a> <span class="quiet">- Lead Writer</span></li>
						<li><a href="#">Congue Porttitor</a> <span class="quiet">- Editor</span></li>
						<li><a href="#">Etiam Blandit</a> <span class="quiet">- Writer</span></li>
						<li><a href="#">Diet Tesque</a> <span class="quiet">- Writer</span></li>
					</ul>
					
				</div>

			</div>

			<div class="section">

				<div class="section-title">Topics</div>

				<div class="section-content">
					<div class="quiet">
						<a href="#" style="font-size: 120%">vestibulum</a> <a href="#" style="font-size: 120%">ante</a> <a href="#" style="font-size: 150%">ipsum</a> <a href="#" style="font-size: 120%">faucibus</a> <a href="#" style="font-size: 90%">orci luctus</a> <a href="#" style="font-size: 80%">ultrices</a> <a href="#" style="font-size: 220%">posuere cubilia</a> <a href="#" style="font-size: 100%">curae</a> <a href="#" style="font-size: 110%">quisque</a> <a href="#" style="font-size: 150%">ut arcu</a> <a href="#" style="font-size: 140%">eros</a> <a href="#" style="font-size: 100%">vestibulum</a> <a href="#" style="font-size: 90%">dapibus</a> <a href="#" style="font-size: 120%">volutpat</a> <a href="#" style="font-size: 200%">elementum</a> 
					</div>
				</div>
			
			</div>

		</div>

		<div class="clearer">&nbsp;</div>

	</div>

	<div id="footer">

		<div class="left" id="footer-left">
			
			<img src="img/logo-small.gif" alt="" class="left" />
			
			<p>&copy; 2002-2009 Simple Organization. All rights Reserved</p>

			<p class="quiet"><a href="http://templates.arcsin.se/">Website template</a> by <a href="http://arcsin.se/">Arcsin</a></p>
			
			<div class="clearer">&nbsp;</div>

		</div>

		<div class="right" id="footer-right">

			<p class="large"><a href="#">Blog</a> <span class="text-separator">|</span> <a href="#">Events</a> <span class="text-separator">|</span> <a href="#">About</a> <span class="text-separator">|</span> <a href="#">Archives</a> <span class="text-separator">|</span> <strong><a href="#">Join Us!</a></strong> <span class="text-separator">|</span> <a href="#top" class="quiet">Page Top &uarr;</a></p>

		</div>

		<div class="clearer">&nbsp;</div>

	</div>

</div>

</body>
</html>